<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lato:300");
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  text-align: center;
			  background: #222;
			}
			
			.rainbow {
			  letter-spacing: 0.2rem;
			  font-size: 1.2rem;
			  font-family: Lato, serif;
			  text-transform: uppercase;
			}
			.rainbow span {
			  animation: rainbow 50s alternate infinite forwards;
			}
			
			@keyframes rainbow {
			  0% {
			    color: #8fedef;
			  }
			  5% {
			    color: #ef8f94;
			  }
			  10% {
			    color: #8fd1ef;
			  }
			  15% {
			    color: #b3ef8f;
			  }
			  20% {
			    color: #efc18f;
			  }
			  25% {
			    color: #a9ef8f;
			  }
			  30% {
			    color: #8fefb9;
			  }
			  35% {
			    color: #d1ef8f;
			  }
			  40% {
			    color: #ef8f9c;
			  }
			  45% {
			    color: #efd68f;
			  }
			  50% {
			    color: #8fefbc;
			  }
			  55% {
			    color: #ef8fa4;
			  }
			  60% {
			    color: #beef8f;
			  }
			  65% {
			    color: #8fd1ef;
			  }
			  70% {
			    color: #a38fef;
			  }
			  75% {
			    color: #efd98f;
			  }
			  80% {
			    color: #ef8fa6;
			  }
			  85% {
			    color: #8fefb7;
			  }
			  90% {
			    color: #8feaef;
			  }
			  95% {
			    color: #bfef8f;
			  }
			  100% {
			    color: #e48fef;
			  }
			}
		</style>
	</head>
	<body>
		<div class="rainbow">
			我们认为生命轻如鸿毛，
            但是，这并不等同于慢待生命的意思，
            而是要将生命作为轻如鸿毛的东西来呵护。
            ——太宰治 
	    ​​​​</div>
	</body>
</html>
<script>
	"use strict";
	let rainbowText = document.querySelector(".rainbow");
	let letters = rainbowText.textContent.split("");
	rainbowText.textContent = "";
	letters.forEach((letter, i) => {
	    let span = document.createElement("span");
	    span.textContent = letter;
	    span.style.animationDelay = `${-20 + i * 0.2}s`;
	    rainbowText.append(span);
	});
</script>
